<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="res/css/main.css" />
        <link rel="stylesheet" type="text/css" href="res/css/jquery-ui-1.8.18.custom.css" />
        <script src="res/js/jquery.js" type="text/javascript"></script>
        <script src="res/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function showData(data){
                
            }
                
            function slide(data){
                $.ajax({
                        url: "alltweets",
                        success: function(data){
                            $('#tweets-div').html(data); 
                            $( ".list-tweets" ).effect( 'slide',{direction:'up'},500,showData(data));                                       
                        }
                    });                
            }
            $(document).ready(function() {                          
                
                $(".tweet-header").addClass("ui-corner-top");
                $(".tweet-content").addClass("ui-corner-bottom");
                
                $("#btn1").click(function() {
                    $( ".list-tweets" ).effect( 'fade',{direction:'up'},500,slide);                    
                }).button(); 
                
                
            });        
            
        </script>

        <title>JSP Page</title>
    </head>
    <body>

        <!-- Begin Wrapper -->
        <div id="wrapper">

            <!-- Begin Header -->
            <div id="header">

                <h1>Twitter Application</h1>		 

            </div>

            <!-- Begin Navigation -->
            <div id="navigation">

                This is the Navigation		 

            </div>
            <!-- End Navigation -->

            <!-- End Header -->

            <!-- Begin Left Column -->
            <div id="leftcolumn">
                <a href="uploadphoto.jsp"><img src="res/img/<c:out value="${sessionScope.user.userName}" />.jpg" width="100" height="120" alt="Imagen de Perfil"/></a>
                <div id="username">
                     <c:out value="${sessionScope.user.nombre}" /> <c:out value="${sessionScope.user.apellido}" />
                </div>
                <div id="infouser">
                     Usuario: <c:out value="${sessionScope.user.userName}" /> <br/>
                     Email: <c:out value="${sessionScope.user.email}" />
                </div>
                     

            </div>
            <!-- End Left Column -->

            <!-- Begin Content Column -->
            <div id="content">

                <h1>Welcome to Tec Viedo</h1>
                <br/>
                Please Login <a href="login.jsp">here</a>
                <br/>
                If you dont have account, please sign in <a href="signin.jsp">here.</a>
                <br/>

                <div id="tweets-div">
                    <div class="list-tweets">
                            <div class="ui-widget-header tweet-header">
                                ChuyAMS
                            </div>
                            <div class="ui-widget-content tweet-content">
                                <div class="tweet-content-img">
                                    <img src="resources/img/chivas2.png">
                                </div>
                                <div class="tweet-content-text">
                                    First Tweet
                                </div>
                            </div>
                            <div class="ui-widget-header tweet-header">
                                ChuyAMS
                            </div>
                            <div class="ui-widget-content tweet-content">
                                <div class="tweet-content-img">
                                    <img src="resources/img/chivas2.png">
                                </div>
                                <div class="tweet-content-text">
                                    First Tweet
                                </div>
                            </div>
                            <div class="ui-widget-header tweet-header">
                                ChuyAMS
                            </div>
                            <div class="ui-widget-content tweet-content">
                                <div class="tweet-content-img">
                                    <img src="resources/img/chivas2.png">
                                </div>
                                <div class="tweet-content-text">
                                    First Tweet
                                </div>
                            </div>
                    </div>
                </div>
                 <div>
                    <button id="btn1">New Tweets</button>
                 </div>
            </div>
            <!-- End Content Column -->

            <!-- Begin Right Column -->
            <div id="rightcolumn">

                Right Column  

            </div>
            <!-- End Right Column -->

        </div>
        <!-- End Wrapper -->

    </body>
</html>
